<!--
//
// GEditor.vue
// hs-admin
//
// Created by 区区电脑 on 2023/05/06.
//
-->
<template>
    <div class="GEditor">
        <Toolbar :defaultConfig="toolbarConfig" :editor="editorRef" :mode="mode" class="tool-bar" />
        <Editor :defaultConfig="editorConfig" :mode="mode" :style="editorStyle" class="editor" @onChange="onChange" @onCreated="handleCreated" />
    </div>
</template>

<script setup>
import {computed, watch, shallowRef, onMounted, onBeforeUnmount} from "vue";
import '@wangeditor/editor/dist/css/style.css'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import * as api from "./api.js"

const props = defineProps({
    height: {type: Number, default: () => 400},
    modelValue: {type: String, default: () => ""},
    placeholder: {type: String, default: () => "请输入内容"},
    params: {
        type: Object,
        default: () => {
            return {
                fileModule: 10
            }
        }
    }
});
const emits = defineEmits(["update:modelValue"]);

const editorStyle = computed(() => {
    return {
        height: props.height + "px",
    }
})

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 模式
const mode = "default";

// 工具栏配置
const toolbarConfig = {
    toolbarKeys: [
        {
            key: "h-",
            title: "标题",
            menuKeys: ["header1", "header2", "header3", "header4", "header5"]
        },
        "fontSize", "fontFamily",
        {
            key: "text",
            title: "文字样式",
            menuKeys: ['bold', 'italic', "underline", "indent"]
        },
        {
            key: "align",
            title: "对齐",
            menuKeys: ["justifyLeft", "justifyRight", "justifyCenter", "justifyJustify"]
        },
        'color', 'bgColor', "clearStyle",
        {
            key: "upload",
            title: "上传图片",
            menuKeys: ["uploadImage"]
        },
        {
            key: "image",
            title: "图片设置",
            menuKeys: ["imageWidth30", "imageWidth50", "imageWidth100"]
        }
    ]
}
// 编辑器配置
const editorConfig = {
    placeholder: props.placeholder,
    MENU_CONF: {
        uploadImage: {
            onBeforeUpload: () => false,
            customUpload: async (file, insertFn) => {
                console.log(file)
                const formData = new FormData()
                formData.append("fileList", file)
                const {success, data} = await api.uploadImage(props.params, formData);
                if (!success) return;
                const src = `${window.$config.baseUrl}/${data}`
                insertFn(src)
            }
        }
    }
}

// 编辑器创建成功回调
const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    setValue()
}

// 给编辑器设置值
function setValue() {
    editorRef.value.setHtml(props.modelValue || "")
}

// 监听编辑器值的变化
function onChange({getHtml}) {
    emits("update:modelValue", getHtml())
}

// 监听到 v-model 变化
watch(() => props.modelValue, () => {
    setValue()
})

onMounted(() => {
})

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})
</script>

<style lang="scss" scoped>
.GEditor {
    border: 1px solid #ccc;
    width: 100%;

    .tool-bar {
        border-bottom: 1px solid #ccc
    }

    .editor {
        overflow-y: hidden;
    }
}
</style>
